<template>
  <el-row class="mosWrap">
    <el-row class="title" type="flex" justify="space-between">
      <el-col :span="12">
        <el-col style="width: 26px" class="imgHide">
          <img height="24" src="../../../assets/images/left.png"/>
        </el-col>
        <el-col align="center" style="line-height: 40px;width: 160px" class="fiveCardTitle">三网核心链路质量</el-col>
        <el-col style="width: 26px" class="imgHide">
          <img height="24" src="../../../assets/images/right.png"/>
        </el-col>
      </el-col>
      <el-col align="right" style="width: 160px;height: 40px;position: relative">
        <MonthWeekDay
          :dataType="dataType"
          style="top:-6px;right:-8px"
          @ClickedBtn="clickedBtn"
        />
      </el-col>
    </el-row>
    <el-row type="flex" class="tableHeaderWrap">
      <div class="tableHeader" style="flex: 1">序号</div>
      <div class="tableHeader" style="flex: 2">接入网络</div>
      <div class="tableHeader" style="flex: 4">核心节点</div>
      <div class="tableHeader" style="flex: 2">时延(ms)</div>
      <div class="tableHeader" style="flex: 2">丢包率</div>
    </el-row>
      <div style="display: flex;flex-direction: column;height:calc(56vh - 100px);">
        <el-scrollbar style="height:100%">
          <el-row
          v-for="(city, index) in dataList"
          :key="index" type="flex"
          :class="index%2 !== 0 ? 'dark' : ''"
          class="tableBody"
        >
          <div class="tableName" style="flex: 1">
            <div class="circle">{{ index + 1 }}</div>
          </div>
          <div class="tableName" style="flex: 2">{{ city.operator }}</div>
          <div class="tableName" style="flex: 4;">
            <el-tooltip :content="city.dest_name" placement="right">
              <div style="width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align: left">{{ city.dest_name }}</div>
            </el-tooltip>
          </div>
          <div class="tableName" style="flex: 2">{{ city.rtt }}</div>
          <div class="tableName" style="flex: 2">{{ city.lost_rate }}%</div>
        </el-row>
        </el-scrollbar>
      </div>
  </el-row>
</template>

<script>
  import MonthWeekDay from './MonthWeekDay'
  export default {
    name: 'TableLeft',
    components: {
      MonthWeekDay
    },
    props: {
      dataList: {
        type: Array,
        default: ()=>[]
      }
    },
    data() {
      return {
        dataType: 10
      }
    },
    methods: {
      clickedBtn(value) {
        this.dataType = value
        this.$bus.$emit('tableTypeChange', value)
      }
    }
  }
</script>

<style scoped>
.mosWrap{
  /*border-radius: 5px;*/
  /*background: rgba(14,22,95,0.4);*/
  /*box-shadow: inset 0px 0px 50px 0px rgba(0,12,125,1);*/
  /*border: 1px solid rgba(14,101,187,0.46);*/
  height: calc(56vh - 40px);
}
.title{
  font-size: 20px;
  line-height: 50px;
  height: 50px;
  text-align: left;
  padding: 6px 16px 0 16px;
  color: #00DDFF;
  font-weight: bold;
}
.tableHeaderWrap{
  background: #003F87;
  border-top: 1px solid rgba(64,169,255,0.5);
  border-bottom: 1px solid rgba(64,169,255,0.5);
  /*margin: 20px 0 10px 0;*/
  padding: 2px 30px 0 10px;
}
.tableHeader{
  flex: 1;
  color: #FFFFFF;
  font-family: Microsoft Tai Le;
  font-weight: 400;
  font-size: 16px;
  line-height: 36px;
  height: 36px;
  text-align: center;
}
.tableName{
  display: flex;
  flex: 1;
  justify-content: center;
  font-family: Microsoft Sans Serif;
  font-weight: 500;
  font-size: 16px;
  text-align: center;
  vertical-align: middle;
}
.tableBody{
  flex: 1;
  align-items: center;
  padding: 0px 30px 0 10px;
  color: #ffffff;
  max-height: 40px;
  line-height: 50px;
}
.tableBody:hover{
  background: linear-gradient(#329ed2,#5b5bf6);
  color: #ffffff;
}
.circle{
  font-weight: bold;
  width: 20px;
  height: 20px;
  background: rgb(0, 128, 255);
  border-radius: 50%;
  line-height: 20px;
}
.dark{
  background: rgba(24,66,107,0.7)
}
.dark:hover{
  background: linear-gradient(#329ed2,#5b5bf6);
  color: #ffffff;
}
@media only screen and (min-width: 1921px) {
  .tableHeader {
    font-size: 16px;
  }
}
@media only screen and (max-width: 1920px) {
  .tableHeader {
    font-size: 16px;
  }
}
@media only screen and (max-width: 1600px) {
  .tableHeader {
    font-size: 14px;
  }
}
@media only screen and (max-width: 1440px) {
  .tableHeader {
    font-size: 14px;
  }
}
  .typeBtn{
    display: inline-block;
    margin-right: 8px;
    width: 44px;
    height: 28px;
    color: #FFFFFF;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    border-radius: 2px;
    background: linear-gradient(180deg, #33367b 0%, #050d25 100%);
    box-shadow: 0px 0px 4px 0px #121212 inset;
    cursor: pointer;
  }
.isActive{
  background: linear-gradient(180deg, #14c473 0%, #0679dc 30%,#05091e 100%);
  box-shadow: 0px 0px 4px 0px #151515 inset;
}
/deep/.el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
